import React from 'react';
import { connect, Dispatch } from 'umi';
import styles from './index.less';
import {
  SettingOutlined,
  MenuOutlined,
  UserOutlined,
  CloseOutlined,
  BellOutlined,
  AppstoreOutlined,
  DatabaseOutlined,
} from '@ant-design/icons';
import { ConnectProps, ConnectState } from '@/models/connect';
import cls from 'classnames';
import { Point } from 'esri/geometry';
// import Timer from './timer';
// import Weather from './weather';

export interface HeaderPropTypes {
  isShowProjList: boolean;
  curProjName: string;
  dispatch: Dispatch;
}

function windownOpen(url = 'index.html') {
  let urlArr = window.location.pathname.split('/');
  urlArr.pop();
  urlArr.push(url);
  window.open(urlArr.join('/'));
}

const Header: React.FC<HeaderPropTypes> = ({ dispatch, isShowProjList, curProjName, userName }) => {
  function fn() {}
  function handleProjListClick() {
    dispatch({
      type: 'app/updateState',
      payload: {
        isShowProjList: !isShowProjList,
      },
    });
  }

  function handleResetProj() {
    dispatch({
      type: 'app/pushUrl',
    });
  }

  function gotoModelManage() {
    // windownOpen('modelManage.html');
    dispatch({ type: 'app/pushUrl', payload: { url: 'modelManage.html' } });
  }
  return (
    <header className={styles.header}>
      <div className={styles.headerLeft}>
        <span
          className={cls(styles.btn, {
            [styles.btnActive]: isShowProjList,
          })}
          onClick={handleProjListClick}
        >
          <img src={require('./images/项目列表.png')} alt="" />
          项目列表
        </span>
        <a href="http://wccg.tech:82/" target="_blank">
        
          <span className={styles.btn}>
            <img src={require('./images/项目管理.png')} alt="" />
            {/* <AppstoreOutlined /> */}
            项目管理
          </span>
        </a>
        <span
          className={cls(styles.btn, {
            [styles.btnActive]: /modelManage/.test(window.location.href),
          })}
          onClick={gotoModelManage}
        >
          <img src={require('./images/内容管理.png')} alt="" />
          {/* <DatabaseOutlined />  */}
          内容管理
        </span>
        <span
          className={cls(styles.btn, {
            [styles.btnActive]: /monitorPage/.test(window.location.href),
          })}
          onClick={() => dispatch({ type: 'app/pushUrl', payload: { url: 'monitorPage.html' } })}
        >
          <img src={require('./images/监控.png')} alt="" />
          {/* <DatabaseOutlined />  */}
          实时监控
        </span>
      </div>
      <div
        className={styles.headerTitle}
        style={{ opacity: 0, cursor: 'pointer' }}
        onClick={handleResetProj}
      >
        <div
          className={cls(styles.project, {
            // [styles.projectHide]: !curProjName,
            [styles.projectHide]: true,
          })}
        >
          {curProjName}
        </div>
        <div
          onClick={handleResetProj}
          className={cls(styles.main, {
            // [styles.mainSmall]: curProjName,
          })}
        >
          无锡市城市重点建设项目管理中心
        </div>
      </div>
      <div className={styles.headerRight}>
        <span className={styles.btn} onClick={fn}>
          <img src={require('./images/消息.png')} alt="" /> 消息
        </span>
        <span className={styles.btn} onClick={fn}>
          <img src={require('./images/我的.png')} alt="" /> {userName || '匿名用户'}
        </span>
      </div>
    </header>
  );
};
export default connect(({ app }: ConnectState) => {
  return {
    isShowProjList: app.isShowProjList,
    curProjName: app.curProjName,
    userName: app.userName,
  };
})(Header);
